<template>
  <div class="container">
    <p class="title">办公自动化信息服务平台</p>
    <div class="con">
      <div class="left">
        <img src="~assets/img/ad.png" alt="" width="300" />
      </div>
      <!-- 登录框 -->
      <div class="login">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="账号登录" name="first">
            <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px">
              <el-form-item prop="username">
                <el-input
                  placeholder="请输入用户名"
                  prefix-icon="el-icon-user"
                  v-model="loginForm.username"
                  clearable
                >
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  placeholder="请输入密码"
                  prefix-icon="el-icon-unlock"
                  v-model="loginForm.password"
                  clearable
                >
                </el-input>
              </el-form-item>
              <el-row type="flex" justify="space-between" class="tip">
                <span @click="showMaskFunc"><i class="iconfont icon-wenhao"></i>温馨提示</span>
                <el-checkbox :border="false" v-model="checked" class="remember"
                  >记住密码</el-checkbox
                >
              </el-row>
              <el-form-item >
                <el-button type="primary" class="submit-btn" @click="loginHandler"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="企业微信登录" name="second">
            <div class="code-wrapper">
              <img src="~assets/img/code.png" alt="" />
              <p>
                <span>请使用企业微信扫描二维码</span>
                <span>登录OA移动办公</span>
              </p>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 遮罩层 -->
      <div class="mask" v-show="showMask">
        <i class="iconfont icon-close" @click="closeMask"></i>
        <p class="m-title">温馨提示</p>
        <div class="m-con">
         <p> 1.用户名为"职工号"</p>
         <p> 2.找回密码的方式：输入错误密码的页面有找回密码的按钮或者输入用户名，点击登录可跳转至相关页面</p>
         <p> 3.建议使用浏览器：谷歌，火狐，360极速浏览器</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script scoped>
// import axios from 'network/request.js'
import { login } from 'network/api/login.js'
export default {
  name: 'Login',
  data () {
    return {
      activeName: 'first',
      loginForm: {
        username: '',
        password: ''
      },
      checked: true,
      showMask: false,
      // 表单验证
      loginFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    // 登录
    loginHandler () {
      this.$refs.loginFormRef.validate(async (valid) => {
        // 验证不通过
        if (!valid) {
          return ''
        } else { // 发送后端请求:登录认证
          const res = await login(this)
          console.log(res)
          if (res.meta.status !== 200) return this.$message.error('登陆失败')
          this.$message.success('登陆成功')
          // 保存token令牌 既可以使用localStorage 也可以使用sessionStorage;若只在当前网站打开期间生效，则使用
          // sessionstorage;若想永久保存则使用localStorage
          window.sessionStorage.setItem('token', res.data.token)
          // 跳转至后台主页
          this.$router.push('/home')
        }
      })
    },
    showMaskFunc () {
      this.showMask = !this.showMask
    },
    closeMask () {
      this.showMask = false
    }
  },
  components: {}
}
</script>

<style lang='less' scoped>
.container {
  width: 100%;
  height: 100%;
  background: url("~assets/img/bg1.jpg") no-repeat fixed center center;
  overflow: hidden;
  .title {
    position: absolute;
    left: 230px;
    top: 80px;
    font-size: 30px;
    color: #fff;
  }
  .con {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 170px;
    padding: 0 170px;
    .left > img {
      width: 440px;
    }
    .login {
      width: 300px !important;
      background-color: rgba(0, 0, 0, 0.54);
      height: 350px;
      /deep/ .el-input__icon {
        font-size: 21px;
        line-height: 43px;
      }
      .submit-btn {
        width: 100%;
      }
      /deep/ .el-form {
        width: 80%;
        margin: 25px auto 0;
      }
      .tip {
        color: #fff;
        margin-bottom: 18px;
      }
      .remember {
        color: #fff;
      }
      .iconfont {
        width: 15px;
        height: 15px;
        background-color: #f3b903;
        color: #fff;
        border-radius: 50%;
      }
    }
    .code-wrapper {
      display: flex;
      padding-top: 25px;
      flex-direction: column;
      align-items: center;
      p {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
        color: #fff;
        span {
          margin-bottom: 5px;
          font-size: 12px;
        }
      }
    }
    .mask {
      position: absolute;
      width: 700px;
      height: 350px;
      box-sizing: border-box;
      padding:0 20px;
      background-color: rgba(0,0,0,0.54);
      .icon-close{
        position: absolute;
        font-size:24px;
        right:15px;
        top:8px;
        color:#fff;
        border-radius: 50%;;
      }
      .m-title{
        height: 40px;
        line-height: 40px;
        text-align: center;
        color:#fff;
        font-size:16px;
        border-bottom:1px solid rgb(199, 195, 195);
      }
      .m-con{
        padding-top: 30px;
         p{
        line-height: 40px;
        font-size:16px;
        color:#fff;
      }
      }
    }
    /deep/ .el-tabs__nav {
      display: flex !important;
      justify-content: space-between !important;
      width: 300px;
      padding: 0 30px;
      box-sizing: border-box;
    }
    /deep/ .el-tabs__active-bar {
      display: none;
    }
    /deep/ .el-tabs__item {
      color: #fff;
      font-weight: bold;
    }
    /deep/ .el-tabs__item.is-active {
      color: #02dbc0;
    }
    /deep/ .el-tabs__nav-wrap::after {
      height: 1px;
      background-color: rgb(199, 195, 195);
    }
  }
}
</style>
